<template>

  <div>
    <el-table max-height="450" :data="functions">
      <el-table-column label="功能标识" align="center" prop="id"/>
      <el-table-column label="功能名称" align="center" prop="name"/>
      <el-table-column label="是否异步" align="center" prop="async">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.iot_is_async" :value="scope.row.async"/>
        </template>
      </el-table-column>
      <el-table-column label="描述" align="center" prop="description"/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">

          <el-button
            style="margin-left: 10px"
            size="mini"
            type="text"
            v-hasPermi="['iot:device:debug']"
            slot="reference"
            @click="handleDebug(scope.row)"
          >
            <svg-icon icon-class="bug"></svg-icon>
            调试
          </el-button>

          <el-button
            class="button-spacing"
            size="mini"
            type="text"
            icon="el-icon-help"
            @click="handleProtocolStandby(scope.row)"
            v-hasPermi="['iot:device:edit']"
          >协议
          </el-button>

          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['iot:device:edit']"
          >编辑
          </el-button>

          <el-popconfirm
            title="确认删除？"
            @confirm="handleDelete(scope.row)"
          >
            <el-button
              style="margin-left: 10px"
              size="mini"
              type="text"
              icon="el-icon-delete"
              v-hasPermi="['iot:device:remove']"
              slot="reference"
            >删除
            </el-button>
          </el-popconfirm>

        </template>
      </el-table-column>
    </el-table>

    <!-- 功能调试 -->
    <functions-debug ref="functionsDebug"/>

  </div>

</template>

<script>

import { mapState } from 'vuex'
import Editor from 'vue2-ace-editor'
import FunctionsDebug from '@/views/iot/device/physical-model/functionsDebug'

export default {
  name: 'FunctionsTable',
  components: {
    Editor,
    FunctionsDebug
  },
  // 字典
  dicts: [
    // 是否异步
    'iot_is_async'
  ],

  data() {
    return {
      //功能列表
      functions: [],
    }
  },
  computed: {
    ...mapState({
      deviceDetailInfo: state => state.device.deviceDetailInfo,
      deviceId: state => state.device.deviceId
    })
  },

  watch: {
    deviceDetailInfo(data) {
      let metadata = JSON.parse(data.metadata)
      this.functions = metadata.functions
    }
  },

  created() {
    let metadata = JSON.parse(this.deviceDetailInfo.metadata)
    this.functions = metadata.functions
  },

  methods: {
    /** 更新按钮操作 */
    handleUpdate(row) {
      this.$store.dispatch('EditDeviceFunctions', row.id)
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      // 删除功能
      this.$store.dispatch('DeleteDeviceMetadata',{ type: 'functions' , id: row.id })
      // 删除协议支持
      this.$store.dispatch('DeleteDeviceProtocolStandby',row.id)
    },

    /** 协议支持按钮操作 */
    handleProtocolStandby(row) {
      this.$store.dispatch('ViewDeviceProtocolStandby', { id: row.id, thingType: 'functions' })
    },

    /** 点击调试按钮 */
    handleDebug(row) {
      this.$refs.functionsDebug.handleDebug(row)
    }
  }
}
</script>

<style scoped>
</style>
